<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .x{
            height: 200px;
            width: 200px;
            padding-bottom: 10px;
            padding-left: 30px;
            padding-top: 20px;
            padding-right: 50px;
            background-color: blueviolet;
            border: 10px solid red;

            /*margin: 30px 60px 90px 120px;*/

            margin-bottom: 10px;

            /*float: left;*/
            /*display: inline;*/
        }

        .y{
            height: 100px;
            width: 100px;
            background-color: pink;

            /*float: right;*/

            /*display: inline;*/


        }

        .a, .b{
            background-color: chocolate;

            /* 内联元素设置宽高无效*/
            height: 200px;
            width: 200px;

            display: block;

            /*float: left;*/

            cursor: pointer;
        }

        .a{
            margin-bottom: 20px;
            margin-right: 20px;
        }

        .b{
            margin-top: 30px;
            margin-left: 20px;
        }


        #xx{
            width: 300px;
            height: 300px;
            background-color: darkcyan;

            /*position: fixed;*/

            /* relative 绝对定位，相对的是该元素原来的位置， 脱离文档流，原有位置保留*/
            /*position: relative;*/


            /*absolute 相对定位 相对第一个有定位的上级元素， 脱离文档流，原有位置不保留*/
            position: absolute;

            top: 100px;
            left: 100px;
        }


        table{
            border: 1px solid #ff0000;
            border-collapse:collapse;
            /*border-spacing:10px 20px;*/
        }

        td{
            border: 1px solid blue;
        }

    </style>
</head>
<body>


<table>

    <tr>
        <td>你好</td>
        <td>你好</td>
        <td>你好</td>
        <td>你好</td>
    </tr>
    <tr>
        <td>你好</td>
        <td>你好</td>
        <td>你好</td>
        <td>你好</td>
    </tr>

</table>



<!--<div class="x">00000</div>-->
<!--<div class="y">11111</div>-->

<span class="a">2222</span>
<span class="b">3333</span>

<!--<a href="">hhh</a>-->
<!--<a href="">hhh</a>-->

<!--<div>-->
    <!--<div style="height: 400px; width: 400px; background-color: lime; position: relative">-->
        <!--<div id="xx"></div>-->
    <!--</div>-->
<!--</div>-->

<!--<img src="./2.jpg" alt="">-->
<!--<img src="./2.jpg" alt="">-->
</body>
</html>